<template>
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
      <span class="navbar-toggler-icon"></span>
    </button>
    <b-link class="navbar-brand" to="#"></b-link>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
      <span class="navbar-toggler-icon"></span>
    </button>
    <b-navbar-nav class="d-md-down-none" v-for="(item, index) in modules">
      <b-nav-item class="px-3" v-if="index< 2 ">{{ item.name }}</b-nav-item>
    </b-navbar-nav>
    <b-navbar-nav class="d-md-down-none" >
      <b-nav-item-dropdown  no-caret>
        <template slot="button-content">
          &nbsp;   &nbsp;   其他模块
        </template>
        <b-dropdown-item v-for="(item, index) in modules" v-if="index>=2">{{ item.name }}</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
    <b-navbar-nav class="ml-auto">
      <HeaderDropdown/>
    </b-navbar-nav>
    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
      <span class="navbar-toggler-icon"></span>
    </button>
  </header>
</template>
<script>
  import HeaderDropdown from './HeaderDropdown.vue'

  export default {
    name: 'header',
    components: {
      HeaderDropdown
    },
    data () {
      return {
        modules: [{
          name: '系统模块',
          id: ''
        },
        {
          name: 'BusService模块',
          id: ''
        },
        {
          name: '博客模块',
          id: ''
        },
        {
          name: '微信模块',
          id: ''
        }
        ]
      }
    },
    methods: {
      sidebarToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-hidden')
      },
      sidebarMinimize (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-minimized')
      },
      mobileSidebarToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-mobile-show')
      },
      asideToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('aside-menu-hidden')
      }
    }
  }
</script>
